<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <title>人员账号管理</title>
  <!--region 引入公用js和css -->
  <link href="../assets/plugins/animate/animate.css" rel="stylesheet">
  <link href="../assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/base/css/components.css" rel="stylesheet" id="style_components" type="text/css"/>
  <link href="../assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/ditop/layout.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/module/gcjsy/css/pagination.css" rel="stylesheet">
  <link href="../assets/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"
        type="text/css"/>
  <link href="../assets/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.css"
        rel="stylesheet">
  <link href="../assets/plugins/bootstrap-toastr/toastr.css" rel="stylesheet">
  <link rel="stylesheet" href="../assets/plugins/sweetalert/sweetalert.css">
  <link rel="stylesheet" href="../assets/plugins/layer/theme/default/layer.css">
  <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet">
  <link href="../assets/plugins/icheck/skins/flat/aero.css" rel="stylesheet">
  <link href="../assets/ditop/ditop.css" rel="stylesheet">
  <link href="../assets/ditop/style/ztree/style9/treestyle.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"
        type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/plugins/bootstrap-toastr/toastr.js"></script>
  <script src="../assets/plugins/art-template/template.js"></script>
  <script src="../assets/plugins/layer/layer.js"></script>
  <script src="../assets/ditop/ditop.js"></script>
  <!--endregion-->

  <link href="../assets/module/gcjsy/css/public.css" rel="stylesheet"> <!-- CSS Customization -->

  <style>
    .LS-height {
      height: calc(100vh - 245px);
    }


  </style>
</head>

<body>
<div class="project-wrapper clearfix">
  <div class="main-menu pull-left">
    <div class="logo">
      <a href="#"><img src="../assets/images/logo/logo.png" alt=""></a>
    </div>
    <ul class="control-list">
      <li>
        <a href="#">
          <span class="dtFont dtFont-index"></span>
          <p>首页</p>
        </a>
      </li>
      <li class="active">
        <a href="#">
          <span class="dtFont dtFont-gongzuotai"></span>
          <p>工作台</p>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="dtFont dtFont-tongji"></span>
          <p>统计</p>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="dtFont dtFont-dangan"></span>
          <p>档案</p>
        </a>
      </li>
    </ul>

    <div class="user-info2">
      <ul class="user-function">
        <li>
          <a href="#">
            <span class="dtFont dtFont-tixing"></span>
            <i>26</i>
            <small>消息</small>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="dtFont dtFont-shezhi-copy"></span>
            <small>设置</small>
          </a>
        </li>
      </ul>
      <div class="user-portrait">
        <div class="portrait"><img src="../assets/images/tou.png" alt=""></div>
        <p class="nowrap">Adain</p>
      </div>

    </div>

  </div>
  <div class="main-content pull-right">
    <div class="main-content-head clearfix">
      <h2 class="head-title pull-left">项目管理服务平台 <span>/回复图审意见
                            </span></h2>
      <div class="head-section pull-right">
        <p class="header-text">合肥融创壹号院二期1#~5#楼-设计-1标段</p>
      </div>
    </div>
    <div class="main-content-body padding-bottom-70">

      <div class="main-content-scroll clearfix">
        <div class="crumbs">
          您的位置： <a href="#">系统管理</a> <i class="dtFont dtFont-gengduo"></i><a href="#">账号及权限管理</a>
        </div>
        <div class="radius-content">
          <ul class="radius-tab margin-bottom-15 clearfix">
            <li class="active">账号管理</li>
          </ul>

          <div class="radius-box-main flex-h LS-height">
            <div class="limits-left-box" style="height: 100%">
              <div class="input-icon right popup-search" style="margin-left: 30px;width: 240px;">
                <i class="fa icon-magnifier"></i>
                <input type="text" class="form-control" placeholder="工程名称搜索">
              </div>
              <ul class="pro-staff-list">
                <li>
                  <h3 class="staff-list-title">创新创业园2期-勘察1标段</h3>
                  <div class="staff-list-text">
                    <label>业务类别：</label>
                    <span>勘察</span>
                  </div>
                  <div class="staff-list-text">
                    <label>工程所在地：</label>
                    <span>安徽省合肥市高新区安徽省合肥市高新区安徽省合肥市高新区</span>
                  </div>
                </li>

                <li class="active">
                  <h3 class="staff-list-title">创新创业园2期-勘察1标段</h3>
                  <div class="staff-list-text">
                    <label>业务类别：</label>
                    <span>勘察</span>
                  </div>
                  <div class="staff-list-text">
                    <label>工程所在地：</label>
                    <span>安徽省合肥市高新区</span>
                  </div>
                </li>
                <li class="">
                  <h3 class="staff-list-title">创新创业园2期-勘察1标段</h3>
                  <div class="staff-list-text">
                    <label>业务类别：</label>
                    <span>勘察</span>
                  </div>
                  <div class="staff-list-text">
                    <label>工程所在地：</label>
                    <span>安徽省合肥市高新区</span>
                  </div>
                </li>
                <li class="">
                  <h3 class="staff-list-title">创新创业园2期-勘察1标段</h3>
                  <div class="staff-list-text">
                    <label>业务类别：</label>
                    <span>勘察</span>
                  </div>
                  <div class="staff-list-text">
                    <label>工程所在地：</label>
                    <span>安徽省合肥市高新区</span>
                  </div>
                </li>

              </ul>

            </div>
            <div class="limits-right-box" style="height: 100%;">
              <div class="create-btn-box margin-bottom-15 clearfix">
                <button id="danxuan" class="pull-left normal-button sure margin-right-15">添加人员</button>
                <button class="pull-left normal-button disable">批量操作</button>

                <div class="input-group input-group-search pull-right">
                  <input type="text" class="form-control" placeholder="请输入用户名称或身份证号码">
                  <span class="input-group-btn itemBlue">
                      <button class="btn itemBlue" type="button">
                        <i class="fa icon-magnifier"></i>
                      </button>
                  </span>
                </div>
              </div>
              <div>
                <table class="table table-bordered main-table">
                  <thead>
                  <tr>
                    <th class="text-center media-middle" width="70">
                      <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                        <input type="checkbox">
                        <span></span>
                      </label>
                    </th>
                    <th class="text-center" width="70">序号</th>
                    <th class="ctrl">姓名</th>
                    <th width="180">身份证号码</th>
                    <th>联系手机</th>
                    <th>所属角色</th>
                    <th>账号状态</th>
                    <th>
                      <div class="sortable2">最后登录时间</div>
                    </th>
                    <th class="text-center" width="140">操作</th>
                  </tr>
                  </thead>
                  <tbody>

                  <tr>
                    <th class="text-center media-middle">
                      <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                        <input type="checkbox">
                        <span></span>
                      </label>
                    </th>
                    <td class="text-center">1</td>
                    <td><a class="blue" href="#">孟星魂</a></td>
                    <td>320121199310011137</td>
                    <td>13100000001</td>
                    <td>工程技术部主管...</td>
                    <td>
                      <div class="tab_switch">
                        <label>
                          <input type="checkbox" checked="">
                          <span class="labelCon"></span>
                          <span class="tab_switch_box">
                            <span class="onText">禁用</span>
                            <span class="labelText"></span>
                            <span class="offText">启用</span>
                          </span>
                        </label>
                      </div>
                    </td>
                    <td>2016/09/21 20:20</td>
                    <td class="text-center">
                      <a href="javascript:;" onclick="openSidebar()" class="a-blue">权限设置</a>
                      <a href="javascript:;" class="a-orange margin-left-10">移除</a>
                    </td>
                  </tr>

                  </tbody>

                </table>
              </div>
            </div>
          </div>
        </div>


      </div>

      <div class="footer-submit clearfix">
        <button class="pull-right normal-button sure margin-left-15">提交</button>
        <button class="pull-right normal-button cancel">取消</button>
      </div>
    </div>
  </div>

  <!--侧边栏-->
  <div class="sidebar">
    <div class="sidebar-head">
      <span>权限设置</span>
      <span class="sidebar-close"></span>
    </div>
    <div class="sidebar-body" style="padding: 16px 0 0 0">

      <section class="sidebar-box-item padding-lr-16 margin-bottom-15">
        <h3 class="title2 margin-bottom-5">
          <span>用户角色（2/100）</span>
          <small>（已选角色：项目负责人、项目负责人）</small>
        </h3>

        <ul class="border-tab clearfix">
          <li class="active"><a href="#">项目负责人</a></li>
          <li><a href="#">工程管理员</a></li>
          <li><a href="#">施工员</a></li>
          <li><a href="#">资料员</a></li>
          <li><a href="#">审图报审员</a></li>
          <li><a href="#">施工图纸设计师</a></li>
        </ul>


      </section>
      <section class="sidebar-box-item">
        <h3 class="title2 padding-lr-16 margin-bottom-5">
          <span>系统权限</span>
        </h3>

        <div class="role-plane">
          <ul class="tab-cut-list padding-lr-16 clearfix">
            <li class="navItem active">首页（600/1000）</li>
            <li class="navItem">动态（600/1000）</li>
            <li class="navItem">办事（600/1000）</li>
            <li class="navItem">应用中心（600/1000）</li>
          </ul>
          <div class="admit-tabs-con clearfix">
            <div class="mask-tabs-left">
              <!--<div class="ztree" id="tree"></div>-->
            </div>
            <div class="mask-tabs-right">
              <h3 class="title3 margin-bottom-10">
                <span>操作权限</span>
              </h3>
              <ul class="operate-list padding-top-5 clearfix">
                <li><a href="javascript:;">详情查看</a></li>
                <li><a href="javascript:;">发起聘用</a></li>
                <li><a href="javascript:;">详情查看</a></li>
                <li><a href="javascript:;">详情查看</a></li>
                <li><a href="javascript:;">详情查看</a></li>
                <li><a href="javascript:;">撤销申请</a></li>
                <li><a href="javascript:;">撤销申请</a></li>
                <li><a href="javascript:;">撤销申请</a></li>
                <li><a href="javascript:;">发起聘用</a></li>
                <li><a href="javascript:;">发起聘用</a></li>
                <li><a href="javascript:;">发起聘用</a></li>

                <li><a href="javascript:;">详情查看</a></li>
              </ul>
            </div>
          </div>
        </div>

      </section>
    </div>
  </div>
</div>


<!--region 引入公用js和css -->
<script src="../assets/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/js.cookie.min.js"></script>
<script src="../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js"></script>
<script src="../assets/plugins/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<script src="../assets/plugins/counterup/jquery.waypoints.min.js"></script>
<script src="../assets/plugins/counterup/jquery.counterup.min.js"></script>
<script src="../assets/plugins/fullcalendar/fullcalendar.js"></script>
<script src="../assets/plugins/horizontal-timeline/horizontal-timeline.js"></script>
<script src="../assets/plugins/jquery.sparkline.min.js"></script>
<script src="../assets/plugins/select2/js/select2.js"></script>
<script src="../assets/plugins/select2/js/i18n/zh-CN.js"></script>
<script src="../assets/plugins/ztree/jquery.ztree.all.js"></script>
<script src="../assets/plugins/jquery-form/jquery.form.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.placeholder.min.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/plugins/jquery-validator/localization/messages_zh.js"></script>
<script src="../assets/plugins/jquery-validator/additional-methods.js"></script>
<script src="../assets/plugins/bootstrap-growl/jquery.bootstrap-growl.js"></script>
<script src="../assets/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.js"></script>
<script src="../assets/base/scripts/app.js"></script>
<script src="../assets/base/scripts/theme.js"></script>
<script src="../assets/ditop/ditop-addition.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
        charset="UTF-8"></script>
<script type="text/javascript"
        src="../assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/ditop/layout.js"></script>
<!--endregion-->


<div class="center-block popup-box no-padding none" id="id1">
  <style>
    .check-table>div{
      height: 388px;
      overflow: auto;
    }
  </style>

  <div class="padding-top-10 padding-lr-16">
    <div class="reminder">
      <p>只可添加企业已创建的人员，如未选到人员，请确定人员是否已经已创建账号。</p>
    </div>
    <div class="check-table clearfix">
      <div class="check-table-left padding-right-15">

        <div class="check-filter clearfix">
          <select class="form-control fiSub-select pull-left margin-tb-16">
            <option>请选择</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
          </select>

          <div class="input-icon right popup-search pull-right">
            <i class="fa icon-magnifier"></i>
            <input type="text" class="form-control" placeholder="请输入人员姓名或资质号">
          </div>
        </div>

        <table class="table table-bordered main-table small">
          <thead>
          <tr>
            <th class="text-center media-middle" width="70">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <th class="text-center" width="70">序号</th>
            <th class="ctrl">人员名称</th>
            <th>身份证号</th>
            <th>所属部门</th>
          </tr>
          </thead>
          <tbody>

          <tr>
            <th class="text-center media-middle">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <td class="text-center">1</td>
            <td>唐嫣</td>
            <td>342425 19900502 2337</td>
            <td>项目设计部</td>
          </tr>
          <tr>
            <th class="text-center media-middle">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <td class="text-center">2</td>
            <td>刘诗诗</td>
            <td>342425 19900502 2337</td>
            <td>项目设计部</td>
          </tr>
          <tr>
            <th class="text-center media-middle">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <td class="text-center">3</td>
            <td>刘亦菲</td>
            <td>342425 19900502 2337</td>
            <td>项目设计部</td>
          </tr>
          <tr>
            <th class="text-center media-middle">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <td class="text-center">4</td>
            <td>胡歌</td>
            <td>342425 19900502 2337</td>
            <td>项目设计部</td>
          </tr>
          <tr>
            <th class="text-center media-middle">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                <input type="checkbox">
                <span></span>
              </label>
            </th>
            <td class="text-center">5</td>
            <td>周杰伦</td>
            <td>342425 19900502 2337</td>
            <td>项目设计部</td>
          </tr>

          </tbody>

        </table>

        <div class="wrap-fenYe">
          <div class="pagebar"></div>
        </div>

      </div>
      <div class="check-table-right padding-top-15 padding-left-15">
        <h4 class="title3">已选择成员数： <span class="blue">5</span></h4>
        <ul class="name-tag padding-tb-10">

          <li><span>赵四可</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>赵四</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>赵四</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>娜可露露</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>三本太一朗 · 狗蛋</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>娜可露露</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>赵四</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>王守义</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>赵四</span><span class="dtFont dtFont-shanchu"></span></li>
          <li><span>赵四</span><span class="dtFont dtFont-shanchu"></span></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-submit footer-submit-relative clearfix">
    <button class="pull-right normal-button sure margin-left-15">提交</button>
    <button class="pull-right normal-button cancel">取消</button>
  </div>


</div>
<script>
  $('#danxuan').click(function () {
    layer.open({
      title: '选择人员',
      type: 1,
      area: ['900px', '556px'],
      content: $('#id1')
    });
  });

</script>

<!-- 引导页面从这里开始  -->
<style>
  .guide-con{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    /*background: rgba(0,0,0,0.5);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .guide-con>div{
    width: 1366px;
    display: none;
    position: relative;
    /*margin: 0 auto;*/
    /*position: absolute;*/
  }

  .guide-con>div.active{
    display: block;
  }

  .guide-btn-con{
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }

  .guide-btn-con .guide-btn{
    display: inline-block;
    padding: 0 10px;
    width: 100px;
    height: 28px;
    border: 1px solid white;
    color: white;
    border-radius: 13px !important;
    text-align: center;
    line-height: 26px;
    margin: 0 10px;
    cursor: pointer;
  }

  .guide-skip{
    position: absolute;
    right: 45px;
    top: 80px;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 40px;
    border: 1px solid white;
    color: white;
    border-radius: 50px !important;
    cursor: pointer;
  }
</style>

<div class="guide-con">
  <div class="active">
    <img src="y1.png" alt="">
    <div class="guide-btn-con" style="bottom:22px">
      <span class="guide-btn guide-back">下次再说~</span>
      <span class="guide-btn guide-next">开始</span>
    </div>
  </div>
  <div>
    <img src="y2.png" alt="">
    <div class="guide-btn-con">
      <span class="guide-btn guide-prev">上一步</span>
      <span class="guide-btn guide-next">下一步</span>
    </div>
    <span class="guide-skip guide-back">跳过</span>
  </div>

  <div>
    <img src="y3.png" alt="">
    <div class="guide-btn-con">
      <span class="guide-btn guide-prev">上一步</span>
      <span class="guide-btn guide-back">完成</span>
    </div>
  </div>
</div>
<script>
    $(".guide-next").click(function () {
        $(this).parent().parent().removeClass('active').next().addClass("active")
    });
    $(".guide-prev").click(function () {
        $(this).parent().parent().removeClass('active').prev().addClass("active")
    });
    $(".guide-back").click(function () {
        $(".guide-con").hide();
    })
</script>

<!-- 引导页面到这里结束  -->


<script src="../assets/module/gcjsy/js/content.js"></script>

</body>
</html>
